<template>
    <div>
        <h3>门店列表</h3>
        <hr>
        门店名称:<input type="text" v-model="can.shopName">
        服务范围：
        <select v-model="can.fuWu">
            <option value="">请选择</option>
            <option value="早餐早点">早餐早点</option>
            <option value="提前入住">提前入住</option>
            <option value="免费打扫">免费打扫</option>
        </select>

        <input type="button" value="查询" @click="cha" class="btn btn-primary"><br>
        
        <input type="button" value="添加" @click="add" class="btn btn-primary">
        <input type="button" value="批量删除" @click="delall" class="btn btn-danger">
        <input type="button" value="批量启用" @click="updall(1)" class="btn btn-danger">
        <input type="button" value="批量禁用" @click="updall(0)" class="btn btn-danger">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" @click="headall" v-model="checked">
                    </td>
                    <td>Id</td>
                    <td>店名</td>
                    <td>营业时间</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>门店介绍</td>
                    <td>门店地址</td>
                    <td>状态</td>
                    <td>门店logo</td>
                    <td>门店图片</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" @change="bodyall" v-model="ids" :value="item.Id">
                    </td>
                    <td>{{ item.Id }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.Shijian }}</td>
                    <td>{{ item.Fuwu }}</td>
                    <td>{{ item.DianZhu }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.Address }}</td>
                    <td>{{ item.State == 1 ? "启用" : "禁用" }}</td>
                    <td>
                        <img :src="item.Logo" width="150" height="100">
                    </td>
                    <td>
                        <img :src="item.Photo" width="150" height="100">
                    </td>
                    <td>
                        <input type="button" value="修改" @click="upd(item.Id)" class="btn btn-success">
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>共<b>{{ data.totalPage }}</b>页</span>
        <span>每页<b>{{ can.pageSize }}</b>条</span>
        <span>共<b>{{ can.pageIndex }}/{{ data.totalPage }}</b>页</span>
        <select @change="getshop" v-model="can.pageSize">
            <option :value="item" v-for="item in ye">每页{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="gopage(1)" class="btn btn-link">
        <input type="button" value="上一页" @click="gopage(can.pageIndex-1)" class="btn btn-link">
        <span v-for="item in data.totalPage" @click="gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="gopage(can.pageIndex+1)" class="btn btn-link">
        <input type="button" value="尾页" @click="gopage(data.totalPage)" class="btn btn-link">
        <input type="text" v-model="can.pageIndex">
        <input type="button" value="跳转" @click="gopage(can.pageIndex)" class="btn btn-warning">

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { idText } from 'typescript';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0,
})
let can: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    shopName: "",
    fuWu: ""
})
let checked = ref();
let ids = ref([]);
let ye=ref([2,4,6,8])
onMounted(() => {
    getshop();
})
const cha=()=>{
    can.pageIndex=1;
    getshop();
}

//修改
const upd=(id:any)=>{
    router.push({
        path:"/shopupd",
        query:{
            id:id
        }
    })
}

//删除
const del=(id:any)=>{
    if(confirm("确定删除吗")){
        axios({
            method:"delete",
            url:"/api/Month/Delall",
            params:{
                ids:id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功')
                ids.value=[];
                checked.value="";
                getshop()
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

//批量启用禁用
const updall=(state:any)=>{
    if(confirm("确定修改吗")){
        axios({
            method:"get",
            url:"/api/Month/Updall",
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('修改成功')
                ids.value=[];
                checked.value="";
                getshop()
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}


//批量删除
const delall=()=>{
    if(confirm("确定删除吗")){
        axios({
            method:"delete",
            url:"/api/Month/Delall",
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功')
                ids.value=[];
                checked.value="";
                getshop()
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}

//翻页
const gopage=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>data.totalPage){
        can.page=data.totalPage
        return;
    }
    can.pageIndex=num;
    getshop();
}
//添加
const add=()=>{
    router.push('/shopadd')
}
//全选全不选
const headall = () => {
    checked.value = !checked.value;
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    } else {
        ids.value = []
    }
}
//反选
const bodyall = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}


const getshop = () => {
    axios({
        method: "get",
        url: "/api/Month/ShowShop",
        params: can
    })
        .then(res => {
            data.list = res.data.list,
                data.totalCount = res.data.totalCount,
                data.totalPage = res.data.totalPage
        })
        .then(err => {
            console.log(err)
        })
}


</script>

<style scoped>
b{
    color: red;
}
input{
    margin: 0 7px;
}
span{
    margin: 0 7px;
}
</style>